<template>
	<su-popup :show="isVisible" type="center" round="3" :isMaskClick="false">
		<view class="model-box ss-flex-1">
			<view class="ss-m-t-56 ss-flex-col ss-col-center">
<!--				<view class="score-title">您好！</view>-->
				<view class="model-title ss-flex ss-m-t-22 ss-m-b-30 ss-block">
					本课为付费内容，请购买或兑换后学习！
				</view>
			</view>
			<view class="model-bg ss-flex ss-self-start ss-flex-col ss-col-center ss-m-t-40">
					<button class="ss-reset-button confirm-btn buy-btn" @click="onPurchase">{{ price }}购买本课程</button>

			</view>
			<view class="btnclose" @click="handleClose">
				<uni-icons type="close" size="30"></uni-icons>
			</view>
		</view>
	</su-popup>
</template>

<script>
	import { computed, reactive, onMounted } from 'vue';
	import sheep from '@/sheep';
	
	export default {
		name: 's-userpaid-card',
		props: {
			isVisible: {
				type: Boolean,
				required: true
			},
			goodsInfo: {
				type: Object,
				default() {},
			}
		},
		computed: {
			price() {
			  // 返回要显示的价格，这里取price数组的第一个元素，如果没有则显示'0'或其他默认值
			  return this.goodsInfo.price.length > 0 ? this.goodsInfo.price[0] : '0';
			}
			
		},
		methods: {
			onPurchase() {
				// 这里可以添加购买逻辑，比如跳转到购买页面或者发起购买请求
				//this.$emit('purchase-clicked');
				sheep.$api.goods.detail(this.goodsInfo.id).then((res) => {
					if (res.code === 1) {
						sheep.$api.cart.append({
							'goods_id': res.data.sku_prices[0].goods_id,
							'goods_sku_price_id': res.data.sku_prices[0].id,
							'type': "inc"
						}).then((res) => {
							if (res.code === 1) {
								this.handleClose();
								sheep.$router.go('/pages/index/cart', {})
							} else {
								console.log("加入购物车失败！");
							}
						});
					} else {
						// 未找到商品
						console.log("未找到")
					}
				});
			},
			handleClose() {
				// 关闭弹窗的逻辑，这里通过触发一个事件来通知父组件
				this.$emit('close-clicked');
			}
		}
	};
</script>

<style lang="scss" scoped>
  .buy-btn{
    border-radius: 5px !important;
  }
	.model-box {
		width: 500px;
    height: 200px;
		border-radius: 3px;
		padding: 5px 20px;
		position: relative;

		.cicon-check-round {
			font-size: 34px;
			color: #fff;
		}

		.score-title {
			font-size: 16px;
			font-family: OPPOSANS;
			font-weight: 500;
			color: #000000;
		}

		.model-title {
			font-size: 18px;
			font-weight: 500;
			color: #000000;
      margin-top: 30px;
		}

		.model-bg {
			width: 100%;
			height: 50px;
			background-size: 100% 100%;
			background-image: v-bind(headerBg);
			background-repeat: no-repeat;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-size: 16px;
				font-weight: bold;
				// color: var(--ui-BG-Main);
				color: #ff6000;
			}

			.subtitle {
				font-size: 14px;
				font-weight: 500;
				color: #999999;
			}

			.cancel-btn {
				width: 110px;
				height: 36px;
				border: 1px solid #ff6000;
				border-radius: 35px;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}

			.confirm-btn {
				width: 320rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #ff6000, #fe832a);
				box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: normal;
			}
		}

		.btnclose {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 30px;
			height: 31px;
		}
	}
</style>